<template>
<div>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="地区">
        <el-select v-model="search.areaId" @change="getSationssByArea">
          <el-option
            v-for="item in areas"
            :key="item.id"
            :label="item.area"
            :value="item.id">
          </el-option>
          <!-- <el-option label="开启" value='1' key='1'></el-option>
          <el-option label="禁用" value='2' key='2'></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="分站">
        <el-select v-model="search.stationId" placeholder="分站">
          <el-option
            v-for="item in stations"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitSearch">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div id="timeTemper" :class="className" :style="{height:height,width:width}"></div>
</div>
</template>

<script>
import fetch from '@/utils/fetch'
import echarts from 'echarts'
import { getNew } from '@/api/console'
require('echarts/theme/macarons') // echarts 主题

const animationDuration = 3000
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '450px'
    }
  },
  data() {
    return {
      chart: null,
      newdata: null,
      a: '',
      formInline: {
        user: '',
        region: ''
      },
      areas: [],
      stations: [],
      search: {
        address: ''
      }
    }
  },
  created() {
    this.getAreas()
  },
  mounted() {
    this.getdata()
  },
  destroyed() {
    clearInterval(this.a)
  },
  methods: {
    getAreas() {
      this.listLoading = true
      fetch.get('/getAllArea').then(res => {
        this.areas = res.content
        this.listLoading = false
      })
    },
    getSationssByArea(v) {
      fetch.get('/station/getStationsByArea?pageSize=100&areaId=' + v).then(res => {
        // TODO
        this.stations = res.content.list
      })
    },
    onSubmitSearch() {
      fetch.get('/monitor/getAllNowData?stationId=' + this.search.stationId).then((res) => {
        // console.log(res)
        this.newdata = res.content
        this.generateChart()
        // console.log(this.newdata)
        // this.initChart()
      })
    },
    getdata() {
      getNew().then((res) => {
        // console.log(res)
        this.newdata = res.content
        // console.log(this.newdata)
        this.initChart()
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('timeTemper'), 'macarons')
      this.setData()
      this.a = setInterval(() => {
        this.setData()
      }, 5 * 60 * 1000)
    },
    setData() {
      getNew().then((res) => {
        this.newdata = res.content
        this.generateChart()
      })
        // })
    },
    generateChart() {
      const option = {
        title: {
          text: '各设备实时温度'
        },
          // legend: {
          //   align: 'left',
          //   data: [{ name: '实时温度' }]
          // },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        visualMap: {
          top: 10,
          right: 0,
          pieces: [{
            gt: 0,
            lte: 45,
            color: '#16c218'
          }, {
            gt: 45,
            lte: 60,
            color: '#ff9224'
          }, {
            gt: 60,
            color: '#f11312'
          }],
          outOfRange: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            show: true,
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            show: true,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 30,
            height: '100%',
            showDataShadow: false,
            left: '94.2%'
          }
        ],
        grid: {
          left: '0%',
          right: '6%',
          bottom: '9%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.newdata.Ydata,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '实时温度',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: this.newdata.Xdata,
          animationDuration
        }]
      }
      this.chart.setOption(option, true)
    }
  },
  watch: {
    // newdata() {
    //   this.initChart()
    // }
  }
}
</script>
